<template>
    <div class="topic_cont flex_column_between" style="position: relative;" ref="boxfull"  v-loading="loading">
        <img class="backhover" @click="$router.go(-1)" src="@/assets/img/back.png" style="position: absolute; left: 15px; top: 10px; z-index: 10; width: 3rem; height: 3rem;" />
        <h5 class="title">选择课程</h5>
        <template v-if="courseData.length > 0">
            <div class="work_cont">
                <div
                    class="item transition flex_center_center"
                    v-for="(item, index) in courseData"
                    :key="index"
                    :class="{active: chooseCourse == item.id}"
                    @click="chooseCourseFun(item)">
                    <el-tooltip effect="dark" placement="top" v-if="item.overflow">
                        <template #content>
                            <p class="tooltip_overflow">{{ item.name }}</p>
                        </template>
                        <p>{{ item.name }}</p>
                    </el-tooltip>
                    <p v-overflow="overflow => courseData.splice(index, 1, { ...courseData[index], overflow })" v-else>{{ item.name }}</p>
                </div>
                <div class="item1"></div>
                <div class="item1"></div>
                <div class="item1"></div>
            </div>
            <el-button
                :loading="confirmLoading"
                id="fullscreen_button"
                style="width: 208px; margin: 2.4rem 0"
                type="primary"
                @click="confirmChoose"
            >
                确认选择
            </el-button>
        </template>
        <empty type="1" text="暂无课程" v-else />
    </div>
</template>

<script>

import {mapState} from 'vuex';
import { courseList } from '@/api/course.js'
import {join } from '@/api/articleExercise.js'
import { appointmentInfo } from '@/api/appointment.js'
import bear_content from '@/views/components/bear_content.vue'

export default {
    components:{ bear_content },
    data() {
        return {
            loading: false,
            confirmLoading: false,
            courseData: [],
            appointmentId: 0,
            userId: 0,
            isLearn: 0, //0: 教练教学练习  1：学生上课
            chooseCourse: 0, //选择的课程
            categoryId: 4, //选择的课程
            appointment: {},
            detectoverflow: false
        }
    },
    computed: {
        ...mapState({ userInfo: state => state.user.userInfo })
    },
    mounted(){
        this.appointmentId = this.$route.query.appointmentId
        this.categoryId = this.$route.query.category
        this.userId = this.$route.query.userId || 0
        this.isLearn = this.userId ? 1 : 0
        this.getCourseList()
        if (this.appointmentId && this.userId) {
            this.getAppointmentInfo()
        }
    },
    methods:{
        getCourseList() {
            this.loading = true
            let param = {}
            if (this.isLearn == 0) {
                param.isTrial = 1
            }else{
                param.userId = this.userId
            }
            param.categoryId = this.categoryId
            courseList(param).then(res => {
                this.courseData = res.data
                this.loading = false
            })
        },
        getAppointmentInfo() {
            this.loading = true
            appointmentInfo({
                id: this.appointmentId,
                userId: this.userId
            }).then(res => {
                this.loading = false
                this.appointment = res.data
                if (this.appointment.course && this.appointment.course.id) {
                    this.chooseCourse = this.appointment.course.id
                }
            }).finally(() => {
                this.loading = false
            })
        },
        chooseCourseFun(row) {
            this.chooseCourse = row.id
            this.categoryId = row.category ? row.category.id : 0
        },
        //确认选择
        confirmChoose() {
            if (!this.chooseCourse) {
                this.$message.error('请选择课程')
                return
            }

            if (this.categoryId == 8){

                if (this.appointmentId) {
                    this.$router.push(`/reading/chapter?appointmentId=${this.appointmentId}&userId=${this.userId}&category=8&courseId=${this.chooseCourse}`)
                }else {
                    this.$router.push(`/reading/chapter?category=8&courseId=${this.chooseCourse}`)
                }
                return;
            }

            let param = {
                courseId: this.chooseCourse,
                appointmentId: this.appointmentId,
                userId: this.userId
            }

            this.confirmLoading = true
            join(param).then(res => {
                this.confirmLoading = false
                if (res.error == 0) {
                    let exerciseId = res.data.id
                    if (this.userId) {
                        this.$router.push(`/reading/level?courseId=${this.chooseCourse}&exerciseId=${exerciseId}&userId=${this.userId}`)
                    }else {
                        this.$router.push(`/reading/level?courseId=${this.chooseCourse}&exerciseId=${exerciseId}`)
                    }
                }
            }).finally(() => {
                this.confirmLoading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.tooltip_overflow{max-width: 200px}

.topic_cont{
    width: 100%;
    height: 100%;
    padding: 0 2.4rem;
}
.title{
    padding: 2rem 0;
    font-size: 3.2rem;
    color: #1A1A1A;
    font-weight: normal;
}
.work_cont{
    width: 100%;
    height:0;
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: start;
    padding-top: 1rem;
    // flex-direction: row;
    overflow-y: scroll;
    overflow: auto;
    align-self:baseline;
    box-sizing: border-box;
    // margin-top: 20px;
    padding:0 20px;
    border-bottom: 2px solid #F7F8FA;

    .item{
        width: 22%;
        min-height: 13.8rem;
        text-align: center;
        line-height: 4.8rem;
        padding: 0 4.5rem;
        background: #F7F8FA;
        border-radius: 10px;
        font-size: 2.4rem;
        margin-bottom: 2.4rem;
        cursor: pointer;

        p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
        &:hover{background: #F69B2C;color: #fff}
    }
    .item1{
        width: 22%;
        height: 13.8rem;
    }
    .active{
        background: #F69B2C;
        color: #fff;
    }

    &::-webkit-scrollbar {
        width: 6px;
        height: 1px;
    }
    /* 滑块部分 */
    &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color:#019E69;
    }
    /* 轨道部分 */
    &::-webkit-scrollbar-track {
    //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #fff;
        border-radius: 5px;
    }

}

</style>
